<script lang="ts">
import {ElConfigProvider} from 'element-plus'

import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import {UserBO} from "~/api/responseResult";
import {ArrowDown} from '@element-plus/icons-vue'
import png from  '~/assets/03b0d39583f48206768a7534e55bcpng.png'

export default defineComponent({
  name: 'Home',
  props: {},
  components: {
    ElConfigProvider,
    ArrowDown,
  },
  data() {
    return {
      realName: '',
      userIcon: '',
      png: png
    }
  },
  async created() {
    const userInfo: UserBO = JSON.parse(<string>localStorage.getItem("user"))
    if (userInfo) {
      this.realName = userInfo.realName
      this.userIcon = userInfo.userIcon
    } else {
      useRouter().push("/login");
    }
  },
  setup() {
    const router = useRouter()
    onMounted(() => {
      console.log("onMounted")
    })

    const signOut = () => {
      localStorage.clear()
      router.push("/login")
    }

    return {
      locale: zhCn,
      router,
      signOut
    }
  }
})

</script>

<template>
  <el-config-provider :locale="locale">
    <el-container
        class="layout-container-demo"
        style="height: 100%; border: 1px solid #eee"
    >
      <el-container>
        <el-header>
          <div @click="router.push('/')" class="toolbar1" style="cursor:pointer;text-align: left; font-size: 12px">
            <img style="height: 60px;" src="../assets/004286b73f46860a0953834abc4dea8.png"/>
          </div>
          <div class="toolbar" style="text-align: right; font-size: 12px">
            <el-avatar
                style="margin-right: 10px"
                :src="png"
            ></el-avatar>
            <el-dropdown>
              <span style="margin-right: 20px">{{ realName }} <el-icon class="el-icon--right"><ArrowDown/></el-icon></span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="signOut">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </el-config-provider>
</template>


<style lang="scss">
.layout-container-demo {
  .el-header {
    position: relative;
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    --el-header-padding: 0px
  }

  .el-aside {
    width: 240px;
    color: var(--el-text-color-primary);
    background: #fff !important;
    border-right: solid 1px #e6e6e6;
    box-sizing: border-box;
  }

  .el-menu {
    border-right: none;
  }

  .el-main {
  }

  .toolbar {
    position: absolute;
    display: inline-flex;
    align-items: center;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }

  .toolbar1 {
    position: inherit;
    display: inline-flex;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
